<!--
 * @Author: White
 * @description: 资讯详情页
 * @LastEditTime: 2021-07-08 20:19:06
-->

<template>
  <div class="main">
    <!-- 顶部 -->
    <!-- <div class="header">
      <div class="header-left" @click="shopgoods">
        <img
          class="header-left-back"
          src="../../assets/images/icon_fanhui@3x.png"
        />
      </div>
      <div class="header-right">
        <div class="header-right-share" @click="shareshow = true">
          <img
            class="header-left-back"
            src="../../assets/images/icon_fenxiang@3x.png"
          />
        </div>
      </div>
    </div> -->

    <!-- 文章开始 -->
    <div class="article">
      <div class="title">
        <div class="h1">
          <span class="tag">
              <span class="font">{{ articleDetail.categoryName }}</span>
          </span>
            {{ articleDetail.title }}
          </div>
      </div>
      <div class="content">
        <div class="detail" v-html="articleContent"></div>
        <!-- <p>
          ZARA早在2018年便进军美妆市场，稍早ZARA
          Beauty又推出其全新的美妆系列，这回ZARA
          Beauty所推出的全新彩妆，由各大高级时装品牌操刀大秀妆容的英国著名美妆师监督，包括相当多元的产品，比如眼妆、唇膏、脸部彩妆与美甲系列等，在色号上具有130多种颜色。
        </p>
        <p>
          另外重头戏就是在于全新的极简包装，运用基本经典的黑白色调，加上以 ZARA
          的 Z
          作为灵感来源的特别斜体包装，注入满满的前卫美学。此系列预计将于5月13日在官方网站开卖
        </p>
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.montres.cn%2Fwp-content%2Fuploads%2F2020%2F02%2Fomega20200112-2.jpg&refer=http%3A%2F%2Fwww.montres.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627719306&t=404e431243fab57678cd2fe8914a3ce2"
        />
        <p>
          ZARA早在2018年便进军美妆市场，稍早ZARA
          Beauty又推出其全新的美妆系列，这回ZARA
          Beauty所推出的全新彩妆，由各大高级时装品牌操刀大秀妆容的英国著名美妆师监督，包括相当多元的产品，比如眼妆、唇膏、脸部彩妆与美甲系列等，在色号上具有130多种颜色。
        </p>
        <img src="../../assets/images/1.png" />
        <img src="../../assets/images/2.png" />
        <p>
          另外重头戏就是在于全新的极简包装，运用基本经典的黑白色调，加上以 ZARA
          的 Z
          作为灵感来源的特别斜体包装，注入满满的前卫美学。此系列预计将于5月13日在官方网站开卖
        </p>
        <img src="../../assets/images/3.png" alt="" /> -->
        <div class="give" @click.once="up">
          <img src="../../assets/images/icon_dianzan@2x.png" alt="" />
        </div>
      </div>
      <!-- 底部 -->
      <div class="footer">
        <div class="time">{{time}}</div>
        <div class="number">
          <img src="../../assets/images/@3xicon_xianshi.png" />
          <span>{{articleDetail.browseCount}}</span>
        </div>
      </div>
    </div>

    <!-- 相关商品 -->
    <div class="about-shop">
      <h1>相关商品</h1>
      <div
        class="shop-item"
        v-for="(item, index) in articleDetail.goods"
        :key="index"
        @click="getDetail(item.spuId)"
      >
        <div class="picture">
          <img :src="item.pic" />
        </div>
        <div class="Introduction">
          <p>
            {{ item.name }} {{item.brandName}} {{item.categoryName}} {{item.categoryTypeName}}
          </p>
        </div>
      </div>
    </div>

    <!-- 分享弹出层 -->
    <van-popup
      class="pop-share"
      v-model="shareshow"
      position="bottom"
      :style="{ height: '318px' }"
    >
      <div class="title">分享至</div>
      <div class="terrace-list">
        <div
          class="terrace-item"
          v-for="(item, index) in share"
          :key="index"
          @click="shareBtn(item.text)"
        >
          <div class="imgborder"><img :src="item.img" /></div>
          <div class="imgdesc">{{ item.text }}</div>
        </div>
      </div>
      <div class="cancel">
        <span @click="shareshow = false">取消</span>
      </div>
    </van-popup>
  </div>
</template>


<script>
import shareway from "../shareway";
import { getCategory,articleUp, getArticle } from "@/server/api";
import { Notify } from 'vant';
import share from '@/utils/share';

export default {
    components: {
    [Notify.Component.name]: Notify.Component,
  },
  mixins: [share],
  data() {
    return {
      shareshow: false,
      share: shareway,
      categoryList: [],
      articleDetail: {},
      time:'',
      articleContent:''
    };
  },
  created() {
    // 获取路由参数
    this.id = this.$route.query.articleId;
    if(this.id) {
      this.getArticleDetail(this.id)
    } else {
      this.getArticleDetail('60d69a9bc9f11c6bfb28fd98');
    }
    this.getCategoryList();
  },
  methods: {
    shopgoods() {
      this.$router.push("/ShopGoods");
    },
    getDetail(id) {
      //query传参，使用path跳转
      this.$router.push({
          path:'ShopGoods',
          query: {
            supId: id,
          }
      })
    },
    async getCategoryList() {
      const { data } = await getCategory();
      if (data.code == 200) {
        this.categoryList = data.data;
      }
    },
    async getArticleDetail(articleId) {
      const { data } = await getArticle(articleId);
      if (data.code == 200) {
        let str=data.data.content.replace(/png/ig,"png?x-oss-process=image/auto-orient,1/quality,q_90/watermark,image_aW1hZ2VzL3NodWl5aW4ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMjAvYnJpZ2h0LDIw,g_se,t_90,x_10,y_10");
        this.articleContent=str
        this.articleDetail = data.data;
        this.time=this.formatMsgTime(data.data.publishTime)
      }
    },
    async up(){
         const { data } = await articleUp({articleId:this.articleDetail.id});
         console.log(data)
         Notify({ type: 'success', message: '点赞成功' });
    },
    formatMsgTime(timespan) {
      var dateTime = new Date(timespan); // 将传进来的字符串或者毫秒转为标准时间
      var year = dateTime.getFullYear();
      var month = dateTime.getMonth() + 1;
      var day = dateTime.getDate();
      var hour = dateTime.getHours();
      var minute = dateTime.getMinutes();
      // var second = dateTime.getSeconds()
      var millisecond = dateTime.getTime(); // 将当前编辑的时间转换为毫秒
      var now = new Date(); // 获取本机当前的时间
      var nowNew = now.getTime(); // 将本机的时间转换为毫秒
      var milliseconds = 0;
      var timeSpanStr;
      milliseconds = nowNew - millisecond;
      if (milliseconds <= 1000 * 60 * 1) {
        // 小于一分钟展示为刚刚
        timeSpanStr = "刚刚";
      } else if (
        1000 * 60 * 1 < milliseconds &&
        milliseconds <= 1000 * 60 * 60
      ) {
        // 大于一分钟小于一小时展示为分钟
        timeSpanStr = Math.round(milliseconds / (1000 * 60)) + "分钟前";
      } else if (
        1000 * 60 * 60 * 1 < milliseconds &&
        milliseconds <= 1000 * 60 * 60 * 24
      ) {
        // 大于一小时小于一天展示为小时
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + "小时前";
      } else if (
        1000 * 60 * 60 * 24 < milliseconds &&
        milliseconds <= 1000 * 60 * 60 * 24 * 15
      ) {
        // 大于一天小于十五天展示位天
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + "天前";
      } else if (
        milliseconds > 1000 * 60 * 60 * 24 * 15 &&
        year === now.getFullYear()
      ) {
        timeSpanStr = month + "-" + day + " " + hour + ":" + minute;
      } else {
        timeSpanStr =
          year + "-" + month + "-" + day + " " + hour + ":" + minute;
      }
      return timeSpanStr;
    },
    // 分享
    shareBtn(type) {
      switch (type) {
        case '微信好友':
          console.log('wxhy')
          break;
        case '朋友圈':
          console.log('pyq')
          break;
        case 'QQ好友':
          this.shareToQQ()
          break;
        case 'QQ空间':
          this.shareToRoom()
          break;  
        case '新浪微博':
          this.shareToMicroblog()
          break;
        case '复制链接':
          this.copy()
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./InfoMation.scss";
</style>
<style lang="scss">
.detail {
  p {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #56565e;
    line-height: 22px;
    padding: 16px 0px;
  }
  img {
    width: 100%;
    height: auto;
  }
  p:has(img) {
    pad: 40px;
  }
}
</style>